/**
 * @author:linjiye
 * @date:2024/12/30
 * @desc:
 **/

import {Image, StyleSheet, Text, TouchableOpacity, View, Modal, TouchableHighlight} from 'react-native'
import React, {useRef, useState} from 'react'
import PageScrollView from "@/components/PageScrollView";
import PageTabBar from "@/components/PageTabBar";
import FcButton from "@/components/FcButton";
import FileTabBtn from "@/components/FileTabBtn";
import Animated, {useAnimatedRef, useAnimatedScrollHandler, useSharedValue} from "react-native-reanimated";
import {Button, Carousel} from "@ant-design/react-native";
import {useRouter} from "expo-router";
import FcModal from "@/components/FcModal";

type Props = {}

const result = (props: Props) => {
    const [pageScrollBodyH, setPageScrollBodyH] = useState(0)
    const [list, setList] = useState([
        {
            name: '1',
            id: 1
        }, {
            name: '2',
            id: 2,
        }, {
            name: '3',
            id: 3,
        }
    ])
    const [carouselIndex, setCarouselIndex] = useState(0);
    const carouselRef = useRef<HTMLDivElement>(null);
    const [cpWay, setCpWay] = useState(false);
    const [isDetection,setIsDetection] = useState(false);

    const router = useRouter();

    // @ts-ignore
    function getScrollBodyInfo({height}) {
        setPageScrollBodyH(height)
    }

    const handleCarouselItemChange = (val: React.SetStateAction<number>) => {
        setCarouselIndex(val)
    }

    function handleClickSub() {
        let i = carouselIndex - 1
        carouselRef.current.goTo(i)
        setCarouselIndex(i)
    }

    function handleClickAdd() {
        let i = carouselIndex + 1
        carouselRef.current.goTo(i)
        setCarouselIndex(i)
    }

    function handleToEdit() {
        router.navigate('/aiOriginality/edit')
    }

    function handleTextComparison() {
        router.navigate('/aiOriginality/textComparison')
    }

    return (
        <PageScrollView
            getPageScrollBodyInfo={getScrollBodyInfo}
            bodyStyle={{paddingBottom: 0}}
            pageTab={
                <PageTabBar
                    style={{marginVertical: 10}}
                    title={'生成结果1/4'}
                    right={
                        <TouchableOpacity>
                            <Text style={styles.sc_btn}>再次混搭组合</Text>
                        </TouchableOpacity>
                    }
                />
            }
            pageBottom={
                <View>
                    <View style={styles.bottom_btn}>
                        <TouchableOpacity style={{flex: 1, marginRight: 4}} onPress={()=>setIsDetection(true)}>
                            <FcButton
                                type='default'
                                style={{
                                    width: '100%',
                                    height: 40,
                                    justifyContent: 'center',
                                    backgroundColor: '#F1F2F4',
                                    borderRadius: 8
                                }}
                                itemStyle={{fontSize: 15}}
                                textName='内容脱敏检测'/>
                        </TouchableOpacity>
                        <TouchableOpacity style={{flex: 1, marginLeft: 4}} onPress={() => setCpWay(true)}>
                            <FcButton
                                type='BjJB'
                                colors={['#6989FF', '#C65EFD']}
                                style={{width: '100%', height: 40, justifyContent: 'center'}}
                                itemStyle={{borderRadius: 8, fontSize: 15}}
                                textName='AI 成片'/>
                        </TouchableOpacity>
                    </View>
                </View>
            }
        >
            <View style={[styles.body_wrap, {height: pageScrollBodyH - 8}]}>
                <View style={styles.header_wrap}>
                    <Text>第1篇 默认式</Text>
                    <FileTabBtn index={carouselIndex} len={list.length} onClickSub={handleClickSub}
                                onClickAdd={handleClickAdd}/>
                </View>
                <View style={styles.content_wrap}>
                    <Carousel
                        ref={carouselRef}
                        style={styles.carousel_wrap}
                        selectedIndex={carouselIndex}
                        dots={false}
                        afterChange={handleCarouselItemChange}
                    >
                        {list.map((item, index) => (
                            <Animated.ScrollView key={index}>
                                <TouchableOpacity onPress={() => handleToEdit()}>
                                    <View
                                        style={styles.item_wrap}>
                                        <Text style={styles.item}>Carousel {index}-{carouselIndex}</Text>
                                        <Text style={styles.item}>Carousel {index}-{carouselIndex}</Text>
                                        <Text style={styles.item}>Carousel {index}-{carouselIndex}</Text>
                                        <Text style={styles.item}>Carousel {index}-{carouselIndex}</Text>
                                        <Text style={styles.item}>Carousel {index}-{carouselIndex}</Text>
                                        <Text style={styles.item}>Carousel {index}-{carouselIndex}</Text>
                                        <Text style={styles.item}>Carousel {index}-{carouselIndex}</Text>
                                        <Text style={styles.item}>Carousel {index}-{carouselIndex}</Text>
                                        <Text style={styles.item}>Carousel {index}-{carouselIndex}</Text>
                                        <Text style={styles.item}>Carousel {index}-{carouselIndex}</Text>
                                        <Text style={styles.item}>Carousel {index}-{carouselIndex}</Text>
                                        <Text style={styles.item}>Carousel {index}-{carouselIndex}</Text>
                                        <Text style={styles.item}>Carousel {index}-{carouselIndex}</Text>
                                        <Text style={styles.item}>Carousel {index}-{carouselIndex}</Text>
                                        <Text style={styles.item}>Carousel {index}-{carouselIndex}</Text>
                                        <Text style={styles.item}>Carousel {index}-{carouselIndex}</Text>
                                        <Text style={styles.item}>Carousel {index}-{carouselIndex}</Text>
                                        <Text style={styles.item}>Carousel {index}-{carouselIndex}</Text>
                                        <Text style={styles.item}>Carousel {index}-{carouselIndex}</Text>
                                        <Text style={styles.item}>Carousel {index}-{carouselIndex}</Text>
                                        <Text style={styles.item}>Carousel {index}-{carouselIndex}</Text>
                                        <Text style={styles.item}>Carousel {index}-{carouselIndex}</Text>
                                        <Text style={styles.item}>Carousel {index}-{carouselIndex}</Text>
                                        <Text style={styles.item}>Carousel {index}-{carouselIndex}</Text>
                                        <Text style={styles.item}>Carousel {index}-{carouselIndex}</Text>
                                    </View>
                                </TouchableOpacity>
                            </Animated.ScrollView>
                        ))}
                    </Carousel>
                </View>
                <View style={styles.btn_wrap}>
                    <TouchableOpacity style={styles.btn} onPress={()=>setIsDetection(true)}>
                        <Text style={{fontFamily: 'FcIconFont', color: '#181818', fontSize: 16}}>&#xe631;</Text>
                        <Text style={{color: 'rgba(0, 0, 0, 0.9)', fontSize: 12}}>导入内容管理</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={styles.btn}>
                        <Text style={{fontFamily: 'FcIconFont', color: '#181818', fontSize: 16}}>&#xe65e;</Text>
                        <Text style={{color: 'rgba(0, 0, 0, 0.9)', fontSize: 12}}>复制</Text>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => handleTextComparison()}>
                        <FcButton
                            type='txtJBAndBjJB'
                            colors={['rgba(105, 137, 255, 0.2)', 'rgba(198, 94, 253, 0.2)']}
                            style={{width: 124, height: 28, justifyContent: 'center'}}
                            itemStyle={{height: 28, borderRadius: 8}}
                            textName='查看文案相似度对比' fontSize={12}></FcButton>
                    </TouchableOpacity>
                </View>
            </View>

            <FcModal
                isOpen={cpWay}
                onFcModalClose={() => setCpWay(false)}
                titleText='选择成片方式'
            >
                <View style={{paddingBottom: 18}}>
                    <TouchableOpacity>
                        <View style={styles.cp_wrap}>
                            <View style={styles.cp_left}>
                                <Image style={styles.cp_icon}
                                       source={require('@/assets/images/aiOriginality/bd_cp_icon.png')}
                                       resizeMode={"contain"}></Image>
                                <Text style={styles.cp_title}>本地成片</Text>
                            </View>
                            <Text style={styles.cp_right}>&#xe609;</Text>
                        </View>
                    </TouchableOpacity>
                    <TouchableOpacity>
                        <View style={styles.cp_wrap}>
                            <View style={styles.cp_left}>
                                <Image style={styles.cp_icon}
                                       source={require('@/assets/images/aiOriginality/yd_cp_icon.png')}
                                       resizeMode={"contain"}></Image>
                                <Text style={styles.cp_title}>云端成片</Text>
                            </View>
                            <Text style={styles.cp_right}>&#xe609;</Text>
                        </View>
                    </TouchableOpacity>
                    <TouchableOpacity>
                        <View style={styles.cp_wrap}>
                            <View style={styles.cp_left}>
                                <Image style={styles.cp_icon}
                                       source={require('@/assets/images/aiOriginality/szr_cp_icon.png')}
                                       resizeMode={"contain"}></Image>
                                <Text style={styles.cp_title}>数字人成片</Text>
                            </View>
                            <Text style={styles.cp_right}>&#xe609;</Text>
                        </View>
                    </TouchableOpacity>
                    <TouchableOpacity>
                        <View style={styles.cp_wrap}>
                            <View style={styles.cp_left}>
                                <Image style={styles.cp_icon}
                                       source={require('@/assets/images/aiOriginality/sy_cp_icon.png')}
                                       resizeMode={"contain"}></Image>
                                <Text style={styles.cp_title}>数字声音成片</Text>
                            </View>
                            <Text style={styles.cp_right}>&#xe609;</Text>
                        </View>
                    </TouchableOpacity>
                </View>
            </FcModal>
            <FcModal
                isOpen={isDetection}
                transparent
                closeShow={false}
                animationType='fade'
                onFcModalClose={() => setIsDetection(false)}
                style={styles.modal_default}
                titleText={'内容脱敏检测'}
                titleDesc={'预警提示，仅供参考'}
                titleBottomBorderWidth={0}
                footer={[
                    {
                        text: '取消',
                        onPress: () => setIsDetection(false),
                        style: { color: 'rgba(0, 0, 0, 0.5)',fontSize: 17 },
                    },
                    {
                        text: '确定',
                        onPress: () => setIsDetection(false),
                        style: { color: '#2856FF',fontSize: 17 },
                    },
                ]}
            >
                <View style={{paddingBottom: 10}}>
                    <Text style={styles.check_md}>
                        <Text style={styles.check_md_txt}>脱敏检测目的：</Text>
                        敏感词汇可能造成曝光了减少 、平台下架、用户投诉、版权纠纷、法律风险，请认真对待敏感内容检测结果，并对内容进行改善
                    </Text>
                    {/*<View style={[styles.check_hint,{paddingBottom: 10}]}>*/}
                    {/*    <Text style={styles.check_hint_txt}>没有发现违规风险！</Text>*/}
                    {/*</View>*/}
                    <View style={styles.check_hint}>
                        <Text style={styles.check_hint_txt}>文案中涉及产品质量和驾驶安全问题，建议调整相关表述以避免误导消费者和观众。</Text>
                    </View>
                    <View style={styles.check_hint}>
                        <Text style={styles.check_hint_txt}>1.** <Text style={{color: '#FA5151'}}>问题发动机</Text>**</Text>
                        <Text style={styles.check_hint_txt}>**建议改进**：建议使用“需要跟换的发动机”或“需要升级的发动机”</Text>
                    </View>
                </View>
            </FcModal>
        </PageScrollView>
    )
}

export default result

const styles = StyleSheet.create({
    sc_btn: {
        width: 96,
        height: 28,
        display: 'flex',
        justifyContent: "center",
        alignItems: "center",
        fontSize: 12,
        color: '#2856FF',
        borderRadius: 8,
        backgroundColor: 'white'
    },

    body_wrap: {
        height: '100%',
        backgroundColor: 'white',
        flexDirection: 'column',
        justifyContent: "space-between",
        borderRadius: 8
    },

    header_wrap: {
        flexDirection: 'row',
        alignItems: "center",
        justifyContent: 'space-between',
        paddingHorizontal: 16,
        paddingVertical: 10
    },
    bottom_btn: {
        flexDirection: "row",
        alignItems: "center",
        paddingHorizontal: 16,
        height: 56,
        justifyContent: "space-between",
        backgroundColor: 'white'
    },

    btn_wrap: {
        flexDirection: "row",
        alignItems: "center",
        padding: 12,
        backgroundColor: 'white',
        marginBottom: 8,
        borderTopWidth: 0.5,
        borderTopColor: 'rgba(0, 0, 0, 0.1)',
    },
    btn: {
        flexDirection: "row",
        alignItems: "center",
        backgroundColor: '#F1F2F4',
        borderRadius: 8,
        paddingHorizontal: 8,
        height: 28,
        marginRight: 8
    },
    content_wrap: {
        flex: 1,
    },
    carousel_wrap: {
        width: '100%',
        height: '100%'
    },
    item_wrap: {
        paddingHorizontal: 12,
        paddingVertical: 10
    },
    item: {
        color: 'rgba(0, 0, 0, 0.9)',
        fontSize: 17,
        lineHeight: 26
    },
    cp_wrap: {
        marginHorizontal: 32,
        marginTop: 16,
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        height: 48,
        paddingHorizontal: 18,
        backgroundColor: '#F7F8FA',
        borderRadius: 8,
    },
    cp_left: {
        flexDirection: "row",
        alignItems: "center",
    },
    cp_right: {
        fontFamily: 'FcIconFont',
        color: '#a3a4a5',
        fontSize: 16,
    },
    cp_icon: {
        width: 32,
        height: 32,
        marginRight: 12,
    },
    cp_title: {
        fontSize: 15,
        color: 'rgba(0, 0, 0, 0.9)'
    },
    footer_wrap: {
        flexDirection: "row",
        alignItems: "center",
        height: 56,
        borderTopWidth: 0.5,
        borderTopColor: 'rgba(0, 0, 0, 0.1)',
        padding: 0
    },
    footer_btn: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center"
    },
    popupSlideDown: {
      padding: 0
    },

    content: {
        padding: 20,
        alignItems: 'center',
    },

    modal_default: {
        width: 280,
        borderBottomRightRadius: 12,
        borderBottomLeftRadius: 12
    },
    check_md: {
        paddingHorizontal: 11,
        paddingVertical: 12,
        borderRadius: 8,
        color: 'rgba(0,0,0,0.9)',
        backgroundColor: '#F1F2F4',
        marginTop: 15,
        lineHeight: 18,
        fontSize: 12
    },
    check_md_txt: {
        color: '#FA5151'
    },
    check_hint: {
        marginTop: 12,
    },
    check_hint_txt: {
        lineHeight: 24,
        fontSize: 15,
        color: 'rgba(0,0,0,0.9)',
    }
})